<template>
  <header class="head">
      <div class="head-right">
        <ManufactSelect @change="changeSelect"/>
          <div class="head-input">
              <div class="head-label">点播流ID：</div>
              <el-input @keyup.enter="searchTable" @clear="searchTable" clearable v-model="search.StreamID" placeholder="请输入关键字搜索">
                  <template #append>
                      <el-button icon="el-icon-search" @click="searchTable"></el-button>
                  </template>
              </el-input>
          </div>
      </div>
      <el-button type="primary" @click="goAdd">创建点播</el-button>
  </header>
  <section>
      <ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
        <template #Status="scope">{{scope.soltval.Status}}</template>
        <template #all="scope" >
          <div >
            <span class="link" @click="goEdit(scope.soltval)">查看详情</span>
            <span class="link" @click="openDemand(scope.soltval)">点播预热</span>
            <span class="link" @click="delDemand(scope.soltval)">删除点播</span>
          </div>
        </template>
      </ele-table>


  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance, onActivated, toRef } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import ManufactSelect from '@/components/manufact-select/index.vue';
import { useRouter } from "vue-router"
import {getrequest} from '@/plugins/axios3';

export default defineComponent({
  name: 'OnDemand',
  components:{
      eleTable,
      ManufactSelect
  },
  setup(){
  const instance: any = getCurrentInstance();
  const GL = instance.appContext.config.globalProperties;
  const router = useRouter()  
  const search = reactive({
    StreamID:'',
    ServiceID:'',
  })
  
  const loading = ref(false);
  const pageObj = ref({page:1,size:10,total:0})
  const tableTitleData = ref([
    { label: '厂商ID', prop: 'ServiceID' },
    { label: '点播流ID', prop: 'StreamID' },
    { label: '接入码',align:'center', prop: 'StreamCode' },
    { label: '文件名称',align:'center', prop: 'FileName' },
    { label: '文件大小(M)',align:'center', prop: 'FileSize' },
    { label: '文件状态',align:'center', slotname: 'Status' },
    { label: '操作',align:'center', slotname: 'all' ,width:"248px"}
  ])
  const tableData = ref([])
  const changePage = (val) =>{
    pageObj.value.page = val;
    initData()
  };
 // 厂商
 const getQueryConfig = async() => {
      GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 0}})
      .then((res: any) => {
        if(res.Code === 0) {
          sessionStorage.setItem('config', JSON.stringify(res.Services))
          return res.Service
        }
      })
    }
  let config = JSON.parse(sessionStorage.getItem('config') || '{}') || getQueryConfig()
  const getFileStatus = async(e) => {
    let Passwd;
    config.forEach(item => {
      if(item.ServiceID === e.ServiceID) {
        Passwd = item.Passwd
      }
    })
    const a = await getrequest(GL.$api.video.QueryVodFileStatus, {params: {StreamID: e.StreamID, ServiceID: e.ServiceID, Passwd}}).then(res => {
      e.Status = res.data.Status;
      return e.Status
    })
    return a
  }
  const delDemand = (e) => {
    let Passwd;
    config.forEach(item => {
      if(item.ServiceID === e.ServiceID) {
        Passwd = item.Passwd
      }
    })
    GL.$confirm('此操作将永久删除该点播, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      getrequest(GL.$api.video.DeleteVodFile, {params: {StreamID: e.StreamID, ServiceID: e.ServiceID, Passwd}}).then((res) =>{
        const data = res.data;
        if(data.Code === 0) {
          GL.$message({
            type: 'success',
            message: '删除成功!'
          });
          searchTable()
        }
      })
    })
  }
  const openDemand = (e) => {
    let Passwd;
    config.forEach(item => {
      if(item.ServiceID === e.ServiceID) {
        Passwd = item.Passwd
      }
    })
    GL.$confirm('此操作将点播预热, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(async () => {
      await getrequest(GL.$api.video.PrepareVodVideo, {params: {StreamID: e.StreamID, ServiceID: e.ServiceID, Passwd}}).then((res) =>{
        const data = res.data;
        if(data.Code === 0) {
           GL.$message({
            type: 'success',
            message: '点播预热成功!'
          });
          searchTable()
        } else {
          GL.$message({
            type: 'error',
            message: '点播预热失败!'
          });
        }
      })
    })
  }
  const goAdd = () => {
    router.push({
      path: '/onDemand-create',
    })
  }
  const goEdit = (e) => {
    if(e.StreamID) {
      router.push({
        path: '/onDemand-detail',
        query: {StreamID: e.StreamID, ServiceID:e.ServiceID}
      })
    } else {
      router.push({
        path: '/onDemand-detail',
      })
    }
  }
  
  const initData = async() => {
    loading.value = true
     GL.$axios.get(GL.$api.video.QueryVodStream, {params: {StreamID: search.StreamID, ServiceID: search.ServiceID, PageIndex:pageObj.value.page - 1, PageSize:pageObj.value.size}})
      .then((res: any) => {
        if (res.Code === 0) {
          res.Vods && res.Vods.map( async item => {
            item.FileSize = item.FileSize.toFixed(2)
            item.Status = await getFileStatus(item)
            if(item.Status === 'Normal') {
              item.Status = '正常'
            } else if(item.Status === 'Forbided') {
              item.Status = '禁播'
            } else {
              item.Status = '不存在'
            }
          })
          setTimeout(() => {
            tableData.value = res.Vods;
            pageObj.value.total = res.VodTotal;
            loading.value = false;
          },300)
        }
      })
      .catch((err: any) => {
        tableData.value = [];
        loading.value = false;
      });
  }
  const changeSelect = (val) => {
    search.ServiceID = val ? val.ServiceID : ''
    searchTable()
  }
  const searchTable = () => {
    pageObj.value.page = 1;
    pageObj.value.size = 10;
    initData()
  }
  onActivated(() => {
    searchTable()
  })
  
  return{
    search,
    loading,
    pageObj,
    tableTitleData,
    tableData,
    searchTable,
    changePage,
    goAdd,
    goEdit,
    changeSelect,
    delDemand,
    openDemand,
  }
}
})
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
